<template>
  <page-header-wrapper :title="false">
    <a-card>
      <a-tabs type="card" default-active-key="1">
        <a-tab-pane key="1" tab="公司商标检索库"></a-tab-pane>
<!--        <a-tab-pane key="2" tab="我的自持商标" disabled></a-tab-pane>-->
      </a-tabs>
      <div class="table-page-search-wrapper">
        <a-form-model
          layout="inline"
          :model="queryParam"
        >
          <a-row :gutter="15">
            <a-col :md="6" :sm="24">
              <a-form-model-item label="商标名称">
                <a-input v-model="queryParam['filter[tm_name]']" placeholder="请输入商标名称" :allowClear="true" />
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-model-item label="商标类别">
                <a-select v-model="queryParam['filter[category]']" placeholder="请选择商标类别" :allowClear="true">
                  <a-select-option v-for="(item, index) in categoryOpts" :value="index" :key="index">{{item}}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <template v-if="advanced">
              <a-col :md="6" :sm="24">
                <a-form-model-item label="商标类型">
                  <a-select v-model="queryParam['filter[tm_type]']" placeholder="请选择商标类型" :allowClear="true">
                    <a-select-option v-for="(item, index) in typeOpts" :value="index" :key="index">{{item}}</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="售价区间">
                  <div style="display: flex;align-items: center">
                    <a-input v-model="queryParam['filter[price_start]']" placeholder="请输入期望售价"/>&nbsp;&nbsp;~&nbsp;&nbsp;<a-input v-model="queryParam['filter[price_end]']" placeholder="请输入期望售价"/>
                  </div>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="官费区间">
                  <div style="display: flex;align-items: center">
                    <a-input v-model="queryParam['filter[official_fee_start]']" placeholder="请输入期望官费"/>&nbsp;&nbsp;~&nbsp;&nbsp;<a-input v-model="queryParam['filter[official_fee_end]']" placeholder="请输入期望官费"/>
                  </div>
                </a-form-item>
              </a-col>
<!--              <a-col :md="6" :sm="24">-->
<!--                <a-form-model-item label="注册号">-->
<!--                  <a-input v-model="queryParam['filter[reg_no]']" placeholder="请输入商标注册号" />-->
<!--                </a-form-model-item>-->
<!--              </a-col>-->
              <a-col :md="6" :sm="24">
                <a-form-item label="申请时间">
                  <a-range-picker v-model="queryParam['created_at_start']"  @change="onChangeCreated"/>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="下证时间">
                  <a-range-picker v-model="queryParam['end_time_start']"  @change="onChangeEnd"/>
                </a-form-item>
              </a-col>
            </template>
            <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary" @click="onSearch">查询</a-button>
                <a-button style="margin-left: 8px" @click="resetForm">重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'" />
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div class="table-operator" v-show="showList">
        <s-table
          bordered
          size="middle"
          ref="table"
          :row-key="(record) => record.id"
          :columns="wareroomColumns"
          :data="wareroomData"
        >
          <template slot="tm_type" slot-scope="text">
            {{typeOpts[text]}}
          </template>
          <template slot="category" slot-scope="text">
            {{categoryOpts[text]}}
          </template>
          <template slot="action" slot-scope="text, record">
            <a-button size="small" type="primary" icon="plus" @click="onModal(record.id)">提交意向</a-button>
          </template>
        </s-table>
      </div>
    </a-card>
    <add-intent
      v-if="visible"
      @cancel="onCancel"
      :category="category"
      :groups="groups"
      :gid="gid"
      :app-type-opts="appTypeOpts"
    >
    </add-intent>
  </page-header-wrapper>
</template>

<script>
  import { STable, Ellipsis } from '@/components'
  import transactionColumns from '@/columns/transaction'
  import { getTradeList, getAddIntent } from '@/api/transaction'
  import AddIntent from '@/views/transaction/components/AddIntent'

  export default {
    name: 'Wareroom',
    components: { STable, Ellipsis, AddIntent },
    data () {
      return {
        visible: false,
        showList: false,
        queryParam: {},
        advanced: true,
        wareroomColumns: transactionColumns.wareroom,
        wareroomData: parameters => {
          return getTradeList(Object.assign(parameters, this.queryParam)).then(res => {
            if (res.status === 0) {
              this.categoryOpts = res.result.category_opts
              this.typeOpts = res.result.tm_type_opts
              return res.result
            }
          })
        },
        categoryOpts: {},
        typeOpts: {},
        gid: '',
        category: '',
        groups: '',
        appTypeOpts: {}
      }
    },
    methods: {
      onModal (id) {
        const app = this
        getAddIntent(id).then(res => {
          if (res.status === 0) {
            app.gid = id
            app.category = res.result.category
            app.groups = res.result.groups
            app.appTypeOpts = res.result.appTypeOpts
            app.visible = true
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      onCancel (visible) {
        this.visible = visible
      },
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      onSearch () {
        this.showList = true
        this.$refs.table.refresh(true)
      },
      resetForm () {
        this.queryParam = {}
        this.showList = false
        this.$refs.table.refresh(true)
      },
      onChangeCreated (date, dateString) {
        this.queryParam['filter[created_at_start]'] = dateString[0]
        this.queryParam['filter[created_at_end]'] = dateString[1]
      },
      onChangeEnd (date, dateString) {
        this.queryParam['filter[end_time_start]'] = dateString[0]
        this.queryParam['filter[end_time_end]'] = dateString[1]
      }
    }
  }
</script>

<style scoped>

</style>
